<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-11 11:00:39
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-03 09:39:05
 * @Description:
 *
-->

<template>
  <MyContainer class="diagnose-container">
    <div class="left">
      <div ref="leftTop" class="element">
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <div class="title">健康诊断</div>
        </el-row>
        <SysPerformance style="padding: 0 0.5vw" />
      </div>
      <div class="divider"></div>
      <div class="element alarm">
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <div class="title">风险项</div>
          <el-button
            style="margin-left: auto"
            type="primary"
            plain
            size="mini"
            @click="toAdvice"
          >优化建议</el-button>
        </el-row>
        <div class="alarm-list">
          <div v-if="alarmList.length === 0" class="alarm-none">暂无数据</div>
          <div
            v-for="(item, index) in alarmList"
            :key="index"
            :class="[
              'alarm-item',
              item.alarmLevel === '紧急'
                ? 'urgent'
                : item.alarmLevel === '重要'
                  ? 'major'
                  : item.alarmLevel === '次要'
                    ? 'secondary'
                    : '',
            ]"
            @click="alarmItemClick"
          >
            <div class="name">{{ item.ruleName }}</div>
            <div class="line"></div>
            <el-row type="flex" align="middle" justify="space-between">
              <div class="key text">来源</div>
              <div class="val text">{{ item.resourceName }}</div>
            </el-row>
            <el-row type="flex" justify="space-between" style="margin-top: 4px">
              <div class="key text">时间</div>
              <div class="val text">{{ item.createTime }}</div>
            </el-row>
          </div>
          <div v-if="showAlarmMore" class="alarm-more" @click="alarmMoreClick">查看更多</div>
        </div>
      </div>
    </div>
    <DiagnoseDetail class="right" />
  </MyContainer>
</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import DiagnoseDetail from './components/DiagnoseDetail.vue'
import SysPerformance from './components/SysPerformance.vue'
import { getHealthAlarmList } from '@/api/cnap/self-intelligence-ops'

export default {
  name: 'HealthDiagnose',
  components: {
    MyContainer,
    DiagnoseDetail,
    SysPerformance
  },
  data() {
    return {
      alarmList: [],
      showAlarmMore: false
    }
  },
  computed: {},
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    /**
     * @description: 风险项-查看更多
     * @return {*}
     */
    alarmMoreClick() {
      this.$router.push({
        path: '/self-intelligence-ops/alarm',
        query: {
          tab: 'AlarmOverview' // 去告警总览
        }
      })
    },
    /**
     * @description: 风险项点击
     * @return {*}
     */
    alarmItemClick() {
      this.$router.push({
        path: '/self-intelligence-ops/alarm',
        query: {
          tab: 'AlarmOverview' // 去告警总览
        }
      })
    },
    /**
     * @description: 去 优化建议
     * @return {*}
     */
    toAdvice() {
      this.$router.push({
        name: 'OptimizeAdvice'
      })
    },
    getHealthAlarmList() {
      getHealthAlarmList({
        pageNum: 1,
        pageSize: 4
      }).then((res) => {
        this.alarmList =
          res.data && Array.isArray(res.data.data) ? res.data.data : []
        this.showAlarmMore = res.data ? res.data.totalSize > this.alarmList.length : false
      })
    },
    /**
     * @description: 初始化
     * @return {*}
     */
    initData() {
      this.getHealthAlarmList()
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.diagnose-container {
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: row;
  align-items: center;

  .left {
    flex-shrink: 0;
    width: 17.7vw;
    height: 100%;
    margin-right: 20px;
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
    border-radius: 4px;

    .element {
      padding: 1vw;
      .title {
        .textStyle(16px, 500, #262626);
        line-height: 22px;
      }
    }
    .divider {
      height: 1px;
      background-color: #ececec;
    }
    .alarm {
      .alarm-list {
        height: calc(100vh - 250px - 12.83vw);
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 5px;
        }
        &::-webkit-scrollbar-track-piece {
          background: #f3f3f3;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background: #cccccc;
        }

        .alarm-item {
          margin-bottom: 15px;
          padding: 0.78vw;
          background: linear-gradient(213deg, #00c4ff 0%, #0091ff 100%);
          box-shadow: 0px 2px 5px 0px rgba(83, 97, 255, 0.05);
          border-radius: 8px;
          cursor: pointer;

          &.urgent {
            background: linear-gradient(205deg, #f9b4bd 0%, #f66173 100%);
          }
          &.major {
            background: linear-gradient(213deg, #f6ce01 0%, #f4a93e 100%);
          }
          &.secondary {
            background: linear-gradient(134deg, #44dec5 0%, #4ebcfa 100%);
          }

          .name {
            .textStyle(16px, 500, #FFFFFF);
            line-height: 22px;
          }
          .line {
            height: 1px;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 10px 0;
          }
          .text {
            .textStyle(14px, 400, #FFFFFF);
            line-height: 20px;
            word-break: break-all;

            &.key {
              min-width: 30px;
              margin-right: 5px;
            }
            &.val {
              text-align: right;
            }
          }
        }

        .alarm-none {
          text-align: center;
          .textStyle(14px, 500, #666666);
          margin-top: 100px;
        }

        .alarm-more {
          text-align: center;
          padding-bottom: 5px;
          .textStyle(14px, 500, #262626);
          line-height: 22px;
          cursor: pointer;
        }
      }
    }
  }

  .right {
    flex-shrink: 0;
    flex: 1;
    height: 100%;
  }
}
</style>
